<!doctype html>
<html long="zh">
<head>
    <meta charset="utf-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="login.css">
</head>
<style>
    body{
      background:url(../bk.png) no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
    }
</style>
<body>
<div id="app">
<!--中部内容-->
<div class="wrap" id="wrap" >
    <div class="logWrap" >
        <img id="banner" class="banner" src="../jiemian.png" >
        <div class="logShow">
            <!-- 头部提示信息 -->
            <div class="LoginIndex LoginTop">
                <p class="p1">注册</p>
            </div>
            <!-- 输入框 -->
            <div class="InputStr">
                <ion-icon name="person-outline" width="20" height="20"></ion-icon>
                <input type="text" id="name"
                       placeholder="输入姓名" />
            </div>
            <div class="InputStr">
                <ion-icon name="key-outline" width="20" height="20"></ion-icon>
                <input type="text" id="idcard"
                       placeholder="输入身份证号" />
            </div>
            <div class="InputStr">
                <ion-icon name="call-outline" width="20" height="20"></ion-icon>
                <input type="text" id="phone"
                       placeholder="输入电话号码" />
            </div>
            <div class="LoginButton">
                <button @click="postData()">提 交</button>
                <button @click="goLogin()">取 消</button>
            </div>
        </div>
    </div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<script>
    const vm = new Vue({
        el:"#app",
        data() {
            return {
               
            }
        },
        methods: {
            postData(){
                let user = {
                    name:document.getElementById("name").value,
                    id_card:document.getElementById("idcard").value,
                    phone:document.getElementById("phone").value,
                    state:"正常"
                }
                console.log(user);
                axios.post(`http://localhost:8080/api/user`,user)
                .then(function (response) {
                    if(response.data){
                        alert("注册成功，请前往登录吧");
                        location.href="login.html"
                    }else{
                        alert("注册失败，用户已存在");               
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                
            },
            goLogin(){
                location.href="login.html";
            }
        },
    })
</script>